<template>
	<view class="App_col App_bg">
		<!--  #ifdef H5 -->
		<app-header></app-header>
		<!--  #endif -->
		<view class="tphone">选择你的身份</view>
		<view class="chooseiden">
			<view v-for="(item,index) in roles" :key="index" :class="{'seleted':active === index}"
				  :data-role="item.roleid" class="item" @click="chooseRole(index)">
				<view class="left-side">
					<text class="active" :class="{actived:index===active}"></text>
					<text class="identify">{{ item.shenfen }}</text>
				</view>
				<view class="right-sied">
					<image :src="`${constant.imgUrl}${item.img}`"></image>
				</view>
			</view>

		</view>
		<view class="next_page">
			<view class="next_avtive" @click="activenext">下一步</view>
		</view>
	</view>
</template>

<script>

import AppHeader from '@/components/App_transparent_header'
import { loginParmas } from '@/utils/common'

export default {
	name: 'Loginidetity',
	components: {
		'app-header': AppHeader
	},
	data() {
		return {
			roles: [
				{ shenfen: '装修公司', roleid: '1', img: 'login/icon-3.png' },
				// { shenfen: '经销商', roleid: '2', img: 'login/icon-2.png' },
				{ shenfen: '设计师', roleid: '3', img: 'login/icon.png' },
				{ shenfen: '店长/导购', roleid: '4', img: 'login/icon-1.png' },
				{ shenfen: '安装工', roleid: '5', img: 'login/worker.png' },
				{ shenfen: '家居顾问', roleid: '6', img: 'login/advister.png' }
			],
			active: 0,
			role: 1,
			option: {},
			constant: this.$constant
		}
	},
	onLoad(option) {
		this.option = option
	},
	computed: {
		query() {
			if (this.$route) {
				return this.$route.query
			} else {
				return this.option || {}
			}
		}
	},
	methods: {
		chooseRole(index) {
			this.active = index
			this.role = this.roles[index].roleid
		},
		activenext() {
			const query = loginParmas(this.option)
			uni.navigateTo({
				url: `/pages/login/loginCity/index${this.$util.parse({
					role: this.role,
					...query
				})}`
			})
		}
	}
}
</script>

<style scoped>
	@import url("../../../static/css/module/loginProcess.scss");

	.next_page {
		margin-top: 40px;
	}

	.chooseiden {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-top: 50px;
	}

	.chooseiden .right-sied {
		display: flex;
	}

	.chooseiden .item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 610px;
		height: 140px;
		margin-top: 10px;
		border-radius: 10px;
		line-height: 140px;
		background-image: url("https://wximg.meijiabang.com/hkds/miniapp/images/login/seleback.png");
		background-size: 100% 100%;
		border: 2px solid #dddddd;
		box-shadow: -4px 6px 10px #ededed;
	}

	.chooseiden .left-side {
		display: flex;
		align-items: center;
		flex: 1;
	}

	.chooseiden .seleted {
		border: 3px solid #ffd11a;
	}

	.chooseiden .active {
		width: 46px;
		height: 46px;
		float: left;
		margin-left: 44px;
		background: url("https://wximg.meijiabang.com/hkds/miniapp/images/login/false.png");
		background-size: 100% 100%;
	}

	.chooseiden .actived {
		width: 46px;
		height: 46px;
		float: left;
		background: url("https://wximg.meijiabang.com/hkds/miniapp/images/login/true.png");
		background-size: 100% 100%;
	}

	.chooseiden .staysed {
		background: url("https://wximg.meijiabang.com/hkds/miniapp/images/login/true.png");
		background-size: 100% 100%;
	}

	.chooseiden .identify {
		margin-left: 33px;
		font-weight: bold;
		font-size: 36px;
	}

	.chooseiden image {
		width: 100px;
		height: 100px;
		margin-right: 42px;
	}
</style>
